<template>
  <!-- 安防设备预警报警情况统计 -->
  <div class="alarm-record-wrap">
    <div class="com-form">
      <el-form :inline="true" :model="form" class="demo-form-inline">
        <el-form-item label="报警时间">
          <el-date-picker
            v-model="alarmTime"
            type="daterange"
            align="right"
            unlink-panels
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            :picker-options="pickerOptions"
            value-format="timestamp"
            @change="drawLine"
          />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" class="com-select" @click="drawLine">查询</el-button>
        </el-form-item>
      </el-form>
    </div>

    <div v-if="noData" class="dis-cen no-alarm">暂无预警报警记录</div>
    <div v-else class="echarts-wrap">
      <div class="dis-cen">
        <div id="oil-echarts-polyline" class="columnar" />
        <div id="type-echarts-cake" class="columnar" />
      </div>
    </div>
  </div>
</template>

<script>
import { queryAllCountReport } from '@/api/alarmInfo'
import { handleByDeviceType } from '@/utils/handle.js'
export default {
  name: 'SecurityAlarmStatistics',
  data() {
    return {
      noData: false,
      form: {
        // deviceType: 4
      },
      // 选择的日期数组
      alarmTime: '',
      pickerOptions: {
        shortcuts: [
          {
            text: '最近一周',
            onClick(picker) {
              const end = new Date()
              const start = new Date()
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7)
              picker.$emit('pick', [start, end])
            }
          },
          {
            text: '最近一个月',
            onClick(picker) {
              const end = new Date()
              const start = new Date()
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30)
              picker.$emit('pick', [start, end])
            }
          },
          {
            text: '最近三个月',
            onClick(picker) {
              const end = new Date()
              const start = new Date()
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90)
              picker.$emit('pick', [start, end])
            }
          }
        ]
      }
    }
  },
  mounted() {
    const end = new Date().valueOf()
    this.alarmTime = [end - 3600 * 1000 * 24 * 7, end]
    this.drawLine()
  },
  methods: {
    drawLine() {
      if (this.alarmTime && this.alarmTime.length) {
        this.form.startTime = this.alarmTime[0]
        this.form.endTime = this.alarmTime[1]
      } else {
        try {
          delete this.form.startTime
          delete this.form.endTime
        } catch (e) {
          console.log(e)
        }
      }
      queryAllCountReport(this.form)
        .then(res => {
          if (res.data.length == 0) {
            this.noData = true
          } else {
            this.noData = false
            this.$nextTick(() => {
              setTimeout(() => {
                this.securityEchartsPolyline(res.data)
              }, 0)
              setTimeout(() => {
                this.securityEchartsCake(res.data)
              }, 0)
            })
          }
        })
        .catch(error => {
          console.log(error)
        })
    },
    // 安防设备预警报警情况统计-折线图
    securityEchartsPolyline(d) {
      const device = []
      const staData = []
      const timeArr = []
      for (const i in d) {
        let havai = -1
        for (const stai in staData) {
          if (d[i].deviceType == staData[stai].deviceType) {
            havai = stai
            break
          }
        }
        if (timeArr.indexOf(d[i].dateFmt) < 0) {
          timeArr.push(d[i].dateFmt)
        }
        if (havai == -1) {
          let name = handleByDeviceType(d[i].deviceType);
          staData.push({
            deviceType: d[i].deviceType,
            name: name,
            type: 'line',
            stack: '总量',
            data: [],
            label: {
              show: true,
              position: 'inside'
            }
          })
          device.push(name)
        }
      }
      timeArr.sort().reverse()
      for (const timei in timeArr) {
        for (const i in d) {
          if (timeArr[timei] == d[i].dateFmt) {
            for (const stai in staData) {
              if (isNaN(staData[stai].data[timei])) {
                staData[stai].data[timei] = 0
              }
              if (staData[stai].deviceType == d[i].deviceType) {
                staData[stai].data[timei] += d[i].total
              }
            }
          }
        }
      }
      const myChart = this.$echarts.init(
        document.getElementById('oil-echarts-polyline')
      )
      myChart.setOption({
        title: {
          text: '安防设备预警报警情况统计',
          textStyle: {
            color: '#fff'
          },
          left: 'center'
        },
        legend: {
          data: device,
          textStyle: {
            color: '#fff'
          },
          bottom: '0px',
          left: 'center'
        },
        grid: {
          bottom: '70px'
        },
        xAxis: {
          type: 'category',
          boundaryGap: false,
          data: timeArr,
          axisLine: {
            lineStyle: {
              color: '#fff'
            }
          }
        },
        yAxis: {
          type: 'value',
          axisLabel: {
            color: '#fff'
          },
          // 轴线设置
          axisLine: {
            lineStyle: {
              color: '#fff'
            }
          }
        },
        series: staData
      })
    },
    // 安防设备预警情况占比-饼图
    securityEchartsCake(d) {
      const device = []
      const staData = []
      for (const i in d) {
        let havai = -1
        for (const stai in staData) {
          if (d[i].deviceType == staData[stai].deviceType) {
            havai = stai
            break
          }
        }
        if (havai != -1) {
          staData[havai].value += d[i].total ? d[i].total : 0
        } else {
          let name=handleByDeviceType(d[i].deviceType)
          staData.push({
            deviceType: d[i].deviceType,
            name: name,
            value: d[i].total ? d[i].total : 0
          })
          device.push(name)
        }
      }
      const myChart = this.$echarts.init(
        document.getElementById('type-echarts-cake')
      )
      myChart.setOption({
        title: {
          text: '安防设备预警报警情况占比统计',
          left: 'center',
          textStyle: {
            color: '#fff'
          }
        },
        tooltip: {
          trigger: 'item',
          formatter: '{a} <br/>{b}: {c} ({d}%)'
        },
        legend: {
          bottom: 10,
          left: 'center',
          data: device
        },
        series: [
          {
            name: '安防报警情况占比',
            type: 'pie',
            radius: ['50%', '70%'],
            avoidLabelOverlap: false,
            label: {
              show: false,
              position: 'center'
            },
            emphasis: {
              label: {
                show: true,
                fontSize: '30',
                fontWeight: 'bold'
              }
            },
            labelLine: {
              show: false
            },
            data: staData
          }
        ]
      })
    }
  }
}
</script>

<style lang="scss" scoped>
@import "@/styles/com.scss";
.echarts-wrap {
  background: rgba(255, 255, 255, 0.2);
}
.columnar {
  flex: 1 1 0;
  max-width: 420px;
  height: 320px;
  margin: 20px;
}
.no-alarm {
  color: #e0dbdb;
  font-size: 20px;
  margin-top: 60px;
}
</style>
